<!DOCTYPE html>

<html data-theme="dark" lang="zh-CN">
<head><meta name="description" content="单曲详情 · Ruotong Music｜若通音乐 - 若通音乐（Ruotong Music）。页面：track。高品质商用音乐与音效，授权便捷，企业合作支持。">
<script nonce="g87CPHPV5Hnvht86DuyWcw">
   /* rt-pre-theme */
(function(){
  try{
    var t = localStorage.getItem('theme');
    if(!t){ t = (window.matchMedia && matchMedia('(prefers-color-scheme: dark)').matches) ? 'dark' : 'light'; }
    document.documentElement.setAttribute('data-theme', t);
  }catch(e){}
})();
  </script>
<meta content="default-src 'self'; script-src 'self' https://www.googletagmanager.com https://unpkg.com 'nonce-g87CPHPV5Hnvht86DuyWcw' 'strict-dynamic' 'report-sample'; style-src 'self' 'unsafe-inline' 'report-sample'; img-src 'self' data: https: blob:; font-src 'self' data: https:; connect-src 'self' https:; frame-src 'self' https:; object-src 'none'; base-uri 'self'; frame-ancestors 'none'; upgrade-insecure-requests" http-equiv="Content-Security-Policy"/>
<meta charset="utf-8"/>
<meta content="width=device-width, initial-scale=1" name="viewport"/>
<title>
   单曲详情 · Ruotong Music｜若通音乐
  </title>
<meta content="若通音乐：高品质商用音乐与音效平台，提供 BPM/Key、版本剪辑与分轨 Stems，波形预览与智能搜索，适用广告、短视频、影视与游戏制作。" name="description"/>
<meta content="light dark" name="color-scheme"/>
<meta content="#0b1220" media="(prefers-color-scheme: dark)" name="theme-color"/>
<meta content="#ffffff" media="(prefers-color-scheme: light)" name="theme-color"/>






<script nonce="g87CPHPV5Hnvht86DuyWcw">
   (function () {
      try {
        const saved = localStorage.getItem('theme');
        const prefersDark = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
        document.documentElement.dataset.theme = saved || (prefersDark ? 'dark' : 'light');
      } catch (e) {}
    })();
  </script>



<style>
   /* a11y helpers */
.skip-link{position:absolute;left:-999px;top:auto;width:1px;height:1px;overflow:hidden;}
.skip-link:focus{left:16px;top:16px;width:auto;height:auto;z-index:10000;padding:10px 14px;background:#000;color:#fff;border-radius:6px;}
.visually-hidden{position:absolute!important;clip:rect(1px,1px,1px,1px);padding:0;border:0;height:1px;width:1px;overflow:hidden;white-space:nowrap;}
  </style>
<link href="/πÇÉµû░Φë▓τ¢ÿπÇæµò┤Σ╜ôτ╜æτ½Ö-v331/site/track.html" rel="canonical"/>
<meta content="website" property="og:type"/>
<meta content="Ruotong Music" property="og:site_name"/>
<meta content="单曲详情 · Ruotong Music｜若通音乐" property="og:title"/>
<meta content="若通音乐：高品质商用音乐与音效平台，提供 BPM/Key、版本剪辑与分轨 Stems，波形预览与智能搜索，适用广告、短视频、影视与游戏制作。" property="og:description"/>
<meta content="/πÇÉµû░Φë▓τ¢ÿπÇæµò┤Σ╜ôτ╜æτ½Ö-v331/site/track.html" property="og:url"/>
<meta content="https://www.ruotongmusic.com/assets/og/cover.webp" property="og:image"/>
<meta content="summary_large_image" name="twitter:card"/>
<meta content="单曲详情 · Ruotong Music" name="twitter:title"/>
<meta content="查看并授权单曲，波形预览、标签、相似推荐与色盘联动。" name="twitter:description"/>
<meta content="https://www.ruotongmusic.com/static/og-cover.png" name="twitter:image"/>
<script nonce="g87CPHPV5Hnvht86DuyWcw" type="application/ld+json">
   {"@context": "https://schema.org", "@type": "Organization", "name": "若通音乐", "url": "https://www.ruotongmusic.com", "logo": "https://www.ruotongmusic.com/assets/og/cover.webp"}
  </script>
<link href="/site.webmanifest" rel="manifest"/>
<meta content="strict-origin-when-cross-origin" name="referrer"/>
<link href="/πÇÉµû░Φë▓τ¢ÿπÇæµò┤Σ╜ôτ╜æτ½Ö-v331/site/track.html" hreflang="zh-CN" rel="alternate"/>
<link href="/πÇÉµû░Φë▓τ¢ÿπÇæµò┤Σ╜ôτ╜æτ½Ö-v331/site/track.html?lang=en" hreflang="en-US" rel="alternate"/>
<script nonce="g87CPHPV5Hnvht86DuyWcw" type="application/ld+json">
   {"@context": "https://schema.org", "@type": "WebSite", "name": "若通音乐", "url": "https://www.ruotongmusic.com", "potentialAction": {"@type": "SearchAction", "target": "https://www.ruotongmusic.com/search.html?q={query}", "query-input": "required name=query"}}
  </script>
<script async="True" crossorigin="anonymous" nonce="g87CPHPV5Hnvht86DuyWcw" src="https://www.googletagmanager.com/gtag/js?id=G-XXXX123456">
</script>
<script nonce="g87CPHPV5Hnvht86DuyWcw">
   window.dataLayer=window.dataLayer||[];function gtag(){dataLayer.push(arguments);}gtag('js',new Date());gtag('config','G-XXXX123456');
  </script>


<meta content="dark light" name="color-scheme"/>
<script defer="True" nonce="g87CPHPV5Hnvht86DuyWcw" src="../assets/js/theme-init.js">
</script>




<link href="//unpkg.com" rel="dns-prefetch"/>
<link crossorigin="anonymous" href="https://unpkg.com" rel="preconnect"/>
<link href="//www.googletagmanager.com" rel="dns-prefetch"/>
<link crossorigin="anonymous" href="https://www.googletagmanager.com" rel="preconnect"/>
<link href="//www.ruotongmusic.com" rel="dns-prefetch"/>
<link crossorigin="anonymous" href="https://www.ruotongmusic.com" rel="preconnect"/>






<link href="/assets/apple-touch-icon.png" rel="apple-touch-icon" sizes="180x180"/>
<meta content="zh_CN" property="og:locale"/>



<!-- Favicon -->
<link href="/assets/favicon.svg" rel="icon" type="image/svg+xml"/>
<link href="/assets/favicon.ico" rel="icon" sizes="any"/>
<link href="/assets/favicon.png" rel="apple-touch-icon" sizes="180x180"/>


<script defer="" src="js/palette-click.js"></script>

<link href="/assets/favicon-32.png" rel="icon" sizes="32x32" type="image/png"/>
<link href="/assets/favicon-16.png" rel="icon" sizes="16x16" type="image/png"/>
<link href="https://unpkg.com" rel="preconnect"/>
<link href="https://www.googletagmanager.com" rel="preconnect"/>
<link href="/zh/track" hreflang="zh" rel="alternate"/><link href="/en/track" hreflang="en" rel="alternate"/><link href="/ja/track" hreflang="ja" rel="alternate"/>







<link rel="stylesheet" href="../assets/css/track.min.css">
</head>
<body>
<style>
.skip-to-content{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden;}
.skip-to-content:focus{left:16px;top:16px;width:auto;height:auto;z-index:10000;background:#fff;padding:8px 12px;border:1px solid #000;}
:focus-visible{outline:2px solid currentColor;outline-offset:2px;}
</style>
<a class="skip-to-content" href="#main">跳转到主内容</a>


<a class="skip-link" href="#main-content">
   跳到主要内容
  </a>
<a class="skip-link" href="#main">
   跳到主要内容
  </a>
<header class="header" role="banner">
<div class="container row">
<a aria-label="Ruotong Music 首页" class="logo" href="index-v2.html">
<img alt="Ruotong Music" decoding="async" height="26" loading="lazy" src="assets/logo.svg" width="26"/>
<strong>
      Ruotong Music
     </strong>
</a>
<nav aria-label="主导航">
<a href="index-v2.html">
      音乐
     </a>
<a href="collections.html">
      合集
     </a>
<a href="pricing.html">
      价格
     </a>
<a href="support.html">
      支持
     </a>
</nav>
<div class="grow">
</div>
<div class="actions">
<button aria-label="切换明暗主题" aria-pressed="false" class="theme rt-theme-toggle icon-btn" id="rt-theme-toggle" type="button">
<svg aria-hidden="true" class="sun" height="16" viewbox="0 0 24 24" width="16">
<path d="M6.76 4.84l-1.8-1.79L3.17 4.84l1.79 1.79zm10.45 14.32l1.79 1.79l1.79-1.79l-1.79-1.79zM12 4V1h-0v3zm0 19v-3h0v3zM4 13H1v-2h3zm19 0h-3v-2h3zM6.76 19.16l-1.8 1.79l-1.79-1.79l1.79-1.79zM20.83 4.84l-1.79-1.79l-1.8 1.79l1.8 1.79zM12 7a5 5 0 100 10 5 5 0 000-10z" fill="currentColor">
</path>
</svg>
<svg aria-hidden="true" class="moon" height="16" style="display:none" viewbox="0 0 24 24" width="16">
<path d="M21 12.79A9 9 0 1111.21 3c.47 0 .94.03 1.39.1A7 7 0 1021 12.79z" fill="currentColor">
</path>
</svg>
<span class="rt-visually-hidden">
       切换主题
      </span>
</button>
<button class="btn ghost" type="button">
      登录
     </button>
<a class="btn primary" href="pricing.html">
      开始使用
     </a>
</div>
</div>
</header>
<main class="track-page" id="main-content">
<section class="tp-hero">
<div aria-hidden="true" class="cover" id="tp-cover">
</div>
<div class="meta">
<div class="eyebrow">
<span class="pill" id="tp-artist">
       Artist
      </span>
</div>
<h1 id="tp-title">
      曲目标题
     </h1>
<div class="sub">
<span id="tp-bpm">
       -- BPM
      </span>
<span class="sep">
       ·
      </span>
<span id="tp-len">
       --:--
      </span>
<span class="sep">
       ·
      </span>
<span id="tp-id">
       ID:—
      </span>
</div>
<div class="wave" id="tp-waveform">
</div>
<div class="actions">
<button aria-pressed="false" class="btn" id="tp-like" type="button">
       ♡ 收藏
      </button>
<button class="btn" id="tp-add" type="button">
       ＋ 加入歌单
      </button>
<button class="btn ghost" id="tp-dl" type="button">
       ↓ 下载预览
      </button>
</div>
<div class="tags" id="tp-tags">
</div>
</div>
<aside class="buy-card">
<h4>
      选择授权类型
     </h4>
<ul class="plans">
<li data-plan="personal">
<span>
        个人授权
       </span>
<strong>
        ¥98
       </strong>
</li>
<li class="active" data-plan="company">
<span>
        企业授权
       </span>
<strong>
        ¥392
       </strong>
</li>
<li data-plan="company_plus">
<span>
        企业Plus授权
       </span>
<strong>
        ¥980
       </strong>
</li>
</ul>
<div class="buy-actions">
<a class="btn primary" href="pricing.html" id="tp-buy">
       立即购买
      </a>
<button class="btn" id="tp-cart" type="button">
       加入购物车
      </button>
</div>
</aside>
</section>
<section class="tp-panels">
<div class="panel">
<h3>
      色盘 · 按颜色推荐
     </h3>
<div class="cb mount" id="tp-colorboard">
</div>
<div class="keyword">
<input aria-label="视觉关键词" id="tp-kw" readonly=""/>
<button class="btn ghost" id="tp-copy" type="button">
       复制
      </button>
</div>
</div>
<div class="panel">
<h3>
      按颜色推荐的相似音乐
     </h3>
<div class="recs" id="tp-recs">
</div>
</div>
</section>
<section class="tp-content">
<div class="col">
<h3>
      该音乐最新用到的项目
     </h3>
<p class="muted">
      （示例占位）最近用于品牌宣传片、科技开场、企业视觉片头等。
     </p>
<h3>
      音乐介绍
     </h3>
<p class="muted" id="tp-desc">
      （示例）融合合成器琶音与现代打击元素，刻画清爽而克制的赛博情绪，适合科技、企业、产品场景。
     </p>
<h3>
      含这首音乐的歌单
     </h3>
<div class="pl-list" id="tp-playlists">
</div>
<h3>
      相关推荐
     </h3>
<div class="recs" id="tp-similar">
</div>
</div>
</section>
</main>
<script nonce="g87CPHPV5Hnvht86DuyWcw" src="js/app.js" defer>
</script>
<script crossorigin="anonymous" nonce="g87CPHPV5Hnvht86DuyWcw" src="https://unpkg.com/wavesurfer.js@7/dist/wavesurfer.min.js" defer>
</script>
<script crossorigin="anonymous" nonce="g87CPHPV5Hnvht86DuyWcw" src="https://unpkg.com/wavesurfer.js@7/dist/plugins/timeline.min.js" defer>
</script>
<script crossorigin="anonymous" nonce="g87CPHPV5Hnvht86DuyWcw" src="https://unpkg.com/wavesurfer.js@7/dist/plugins/hover.min.js" defer>
</script>
<script nonce="g87CPHPV5Hnvht86DuyWcw" src="js/wavesurfer-player.js" defer>
</script>
<script nonce="g87CPHPV5Hnvht86DuyWcw" src="js/auth.js" defer>
</script>
<script nonce="g87CPHPV5Hnvht86DuyWcw" src="js/playlist-fallbacks.js" defer>
</script>
<script nonce="g87CPHPV5Hnvht86DuyWcw" src="js/track-page.js" defer>
</script>
<script nonce="g87CPHPV5Hnvht86DuyWcw" src="js/rt-colorpicker.js" defer>
</script>
<script nonce="g87CPHPV5Hnvht86DuyWcw" src="js/rt-theme.js" defer>
</script>
<div aria-hidden="true" aria-labelledby="lm-title" aria-modal="true" class="modal" id="license-modal" role="dialog">
<div class="backdrop" data-close="">
</div>
<div class="box" tabindex="-1">
<button aria-label="关闭" class="close" data-close="" type="button">
     ✕
    </button>
<div class="header">
<div>
<div class="title" id="lm-title">
       确定授权类型
      </div>
<div class="crumbs">
<span id="lm-track-title">
        选中曲目
       </span>
       ·
       <span class="muted" id="lm-artist">
</span>
</div>
</div>
<a class="right-link" href="pricing.html" id="lm-sample" rel="noopener noreferrer" target="_blank">
      授权书范本
     </a>
</div>
<div class="body">
<nav aria-label="主导航" aria-orientation="vertical" class="tabs" role="tablist">
<button aria-selected="true" class="tab" data-plan="personal" role="tab" type="button">
       个人授权
      </button>
<button aria-selected="false" class="tab" data-plan="company" role="tab" type="button">
       企业授权
      </button>
<button aria-selected="false" class="tab" data-plan="company_plus" role="tab" type="button">
       企业PLUS授权
      </button>
<div class="hint">
       企业授权最高 6 折优惠
      </div>
</nav>
<section class="content">
<h4 id="lm-scope-title">
       个人授权范围
      </h4>
<ul class="scope" id="lm-scope-list">
<li class="ok">
<span class="dot">
         ✓
        </span>
<div class="desc">
         个人自媒体、短视频、直播、教程等
        </div>
</li>
<li class="ok">
<span class="dot">
         ✓
        </span>
<div class="desc">
         个人学习、交流、参赛、表演等音视频
        </div>
</li>
<li class="no">
<span class="dot">
         ✕
        </span>
<div class="desc">
         企业广告、宣传等推广音视频
        </div>
</li>
</ul>
</section>
</div>
<div class="footer">
<div class="assure">
<span class="icon">
       🛡️
      </span>
<span>
       50万保障金
      </span>
<span class="price">
<span id="lm-price">
        99
       </span>
<span style="font-size:14px; font-weight:600">
        元
       </span>
</span>
</div>
<div class="actions">
<button class="btn" id="lm-add-cart" type="button">
       加入购物车
      </button>
<button class="btn primary" id="lm-buy" type="button">
       立即购买
      </button>
</div>
</div>
</div>
</div>
<div aria-hidden="true" aria-labelledby="pay-title" aria-modal="true" class="modal" id="pay-modal" role="dialog">
<div class="backdrop" data-close="">
</div>
<div class="box" tabindex="-1">
<button aria-label="关闭" class="close" data-close="" type="button">
     ✕
    </button>
<div class="header">
<div class="title" id="pay-title">
      选择支付方式
     </div>
</div>
<div class="body">
<div class="pay-grid">
<button class="pay-btn" data-gw="paypal" type="button">
       PayPal
      </button>
<button class="pay-btn" data-gw="stripe" type="button">
       Stripe
      </button>
<button class="pay-btn" data-gw="wechat" type="button">
       微信支付 WeChat
      </button>
<button class="pay-btn" data-gw="alipay" type="button">
       支付宝 Alipay
      </button>
</div>
</div>
</div>
</div>
<script nonce="g87CPHPV5Hnvht86DuyWcw" src="config/payments.js" defer>
</script>
<script nonce="g87CPHPV5Hnvht86DuyWcw" src="js/license-modal.js" defer>
</script>
<script nonce="g87CPHPV5Hnvht86DuyWcw" src="js/checkout-bridge.js" defer>
</script>
<script nonce="g87CPHPV5Hnvht86DuyWcw">
   if('serviceWorker' in navigator){window.addEventListener('load',()=>{navigator.serviceWorker.register('/sw.js');});}
  </script>
<script nonce="g87CPHPV5Hnvht86DuyWcw" src="js/rt-color-summary-inject.js" defer>
</script>
<script nonce="g87CPHPV5Hnvht86DuyWcw" src="js/rt-color-button-overlay.js" defer>
</script>
<script nonce="g87CPHPV5Hnvht86DuyWcw" src="js/rt-color-actions.js" defer>
</script>
<script src="js/rt-color-picker-polyfill.js" defer>
</script>
<script nonce="g87CPHPV5Hnvht86DuyWcw">
   // Integrate flexible color picker into the Color Board panel
(function(){
  function when(condFn, cb){
    if (condFn()) return cb();
    var mo = new MutationObserver(()=>{ if (condFn()){ mo.disconnect(); cb(); } });
    mo.observe(document.documentElement, {childList:true, subtree:true});
  }
  function addPicker(){
    var board = document.querySelector('#tp-colorboard');
    if (!board) return;

    // Prefer to mount in the existing controls area if present
    var host = board.querySelector('.cb-controls') || board.querySelector('.cb-left') || board;
    // Avoid duplicate button
    if (host.querySelector('#rt-free-pick')) return;

    var btn = document.createElement('button');
    btn.id = 'rt-free-pick';
    btn.className = 'btn ghost';
    btn.type = 'button';
    btn.style.marginLeft = '8px';
    btn.textContent = '自由取色';
    // place near existing controls
    host.appendChild(btn);

    // initial color: try read selected
    var init = (document.getElementById('tp-selected')?.textContent || '#6FE1FF').trim();
    var picker = RTColorPicker.create({
      initial: init,
      onChange: function(hex){
        try{
          var v = (hex||'').toUpperCase();
          var node = document.getElementById('tp-selected');
          if(node){ node.textContent = v; }
          if (typeof __syncSelectedColor==='function') __syncSelectedColor(v);
        }catch(e){}
// Reuse existing onPick logic by simulating a click on a dot item with our hex
        var grid = document.querySelector('#tp-colorboard .cb-grid');
        if (!grid) return;
        // Use a hidden "dot" to avoid altering visible dots
        var fake = grid.querySelector('.dot#rt-temp-dot');
        if (!fake){
          fake = document.createElement('button');
          fake.id = 'rt-temp-dot';
          fake.className = 'dot';
          fake.style.position = 'absolute';
          fake.style.width = '0';
          fake.style.height = '0';
          fake.style.padding = '0';
          fake.style.margin = '0';
          fake.style.border = '0';
          fake.style.overflow = 'hidden';
          fake.style.left = '-9999px';
          grid.appendChild(fake);
        }
        fake.setAttribute('data-hex', hex);
        fake.style.background = hex;
        // Trigger the same handler used by palette grid
        fake.click();
      }
    });
    btn.addEventListener('click', function(){ picker.open(btn); });
  }
  // Wait until track-page has rendered the colorboard structure
  when(()=> !!document.querySelector('#tp-colorboard .cb-grid'), addPicker);
  // Also capture clicks on palette to push into "最近使用"
  function wirePaletteRecent(){
    try{
      var root = document.querySelector('#tp-colorboard');
      if(!root) return;
      root.addEventListener('click', function(e){
        var el = e.target && (e.target.closest && e.target.closest('.cb-grid .dot, .cb-grid [data-hex], .cb-grid .swatch'));
        if(!el) return;
        try{
          var hex = el.getAttribute('data-hex') || el.getAttribute('data-c') || '';
          if(!hex){
            var sw = el.style && el.style.getPropertyValue && el.style.getPropertyValue('--sw');
            if(sw) hex = sw;
          }
          if(!hex){
            try{
              var cs = getComputedStyle(el);
              var rgb = cs && cs.backgroundColor || '';
              var m = rgb.match(/rgba?\((\d+)[,\s]+(\d+)[,\s]+(\d+)/i);
              if(m){
                var to = function(n){ n=parseInt(n,10); if(isNaN(n)) n=0; var h=n.toString(16).toUpperCase(); return (h.length===1?'0'+h:h); };
                hex = '#' + to(m[1]) + to(m[2]) + to(m[3]);
              }
            }catch(err){}
          }
          if(hex){
            if(hex.charAt(0) !== '#' && /^[0-9A-Fa-f]{6}$/.test(hex)) hex = '#'+hex;
            if(window.RTColorPicker && typeof window.RTColorPicker.push === 'function'){ window.RTColorPicker.push(hex); }
          }
        }catch(err){}
      }, { passive: true });
    }catch(e){}
  }
  when(()=> !!document.querySelector('#tp-colorboard .cb-grid'), wirePaletteRecent);

})();
  </script>
<script nonce="g87CPHPV5Hnvht86DuyWcw" src="../contrast/contrast-theme.js" defer>
</script>
<script nonce="g87CPHPV5Hnvht86DuyWcw" src="../contrast/contrast-palette-restore.js" defer>
</script>
<script nonce="g87CPHPV5Hnvht86DuyWcw" src="../contrast/contrast-swatch-attr.js" defer>
</script>
<script nonce="g87CPHPV5Hnvht86DuyWcw" src="../contrast/contrast-palette-even.js" defer>
</script>
<script nonce="g87CPHPV5Hnvht86DuyWcw" src="../contrast/contrast-palette-recent.js" defer>
</script>
<script src="js/a11y-and-motion.js" defer>
</script>
<footer class="sr-only">
</footer>
<script defer="" src="js/patch.cb-recent-fix.js"></script>
<script defer="" src="js/palette-click-force.js"></script>

<!-- Ruotong Account Buttons (auto-wired) -->
<script>window.RUOTONG_API_BASE = window.RUOTONG_API_BASE || '/api';</script>
<link rel="stylesheet" href="/rt-assets/css/toast.css">
<link rel="stylesheet" href="/rt-assets/css/modal.css">
<script src="/rt-assets/js/toast.js" defer></script>
<script src="/rt-assets/js/modal.js" defer></script>
<script src="/rt-assets/js/account-actions.js" defer></script>


<script>
document.addEventListener('DOMContentLoaded', function(){
  try{ document.body.classList.add('rt-darkfix'); }catch(e){}
});
</script>

<script src="js/rt-favorites.js" defer></script>
</body>
</html>